<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会员折扣计算</title>
    <script src="http://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <input type="checkbox" v-model="isMember" id="member">
        <label for="member">是否会员</label>
        
        <select v-model="memberLevel" v-if="isMember" id="level">
            <option value="diamond">砖石会员</option>
            <option value="gold">黄金会员</option>
            <option value="silver">白银会员</option>
        </select>
        
        <div v-if="isMember">
            {{ gg }}
        </div>
        
        <div>
            数量：<input type="number" v-model.number="quantity" min="1" />
        </div>
        <div>
            单价：<input type="number" v-model.number="price" min="0.01" step="0.01" />
        </div>
        
        <div v-if="isMember">
            尊敬的{{ aaa }}会员, 你购买的数量是{{ quantity }}, 单价是{{ price }},
             折扣是{{ d }}, 总价是{{ total }}元
        </div>
    </div>

    <script>
        const app = Vue.createApp({
            data() {
                return {
                    isMember: false,
                    memberLevel: 'diamond',
                    quantity: 0,
                    price: 0
                }
            },
            computed: {
                gg() {
                    const greetMap = {
                        diamond: '砖石会员欢迎你！',
                        gold: '黄金会员欢迎你！',
                        silver: '白银会员欢迎你！'
                    };
                    return greetMap[this.memberLevel];
                },
                aaa() {
                    const levelMap = {
                        diamond: '钻石',
                        gold: '黄金',
                        silver: '白银'
                    };
                    return levelMap[this.memberLevel];
                },
                d() {
                    const rateMap = {
                        diamond: 0.5,
                        gold: 0.7,
                        silver: 0.9
                    };
                    return (rateMap[this.memberLevel] * 100) + '%';
                },
                total() {
                    const total = this.quantity * this.price * (this.d.replace('%', '') / 100);
                    return total.toFixed(2);
                }
            }
        }).mount('#app');
    </script>
</body>
</html>
